<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>remDemo</title>

    <script type="text/javascript">

        document.addEventListener('DOMContentLoaded', function (e) {
            document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
        }, false);
    </script>
    <!-- <link rel="stylesheet" type="text/css" href="css/xxx.css"> -->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            width: 100%;
            height: 1.06667rem;
            background-color: red;
        }

        .item {
            width: 100%;
            height: 5.33333rem;
            margin-top: 0.13333rem;
        }

        .item-top {
            width: 100%;
            height: 1.06667rem;
            position: relative;
            background-color: green;
        }

        .top-img {
            width: 0.8rem;
            height: 0.8rem;
            display: block;
            position: absolute;
            left: 0.26667rem;
            top: 0.13333rem;
        }

        .item-middle {
            width: 100%;
            height: 3.2rem;
            position: relative;
            background-color: yellow;
        }

        .item-buttom {
            width: 100%;
            height: 1.06667rem;
            position: relative;
            background-color: blue;
        }

        .middle-text {
            font-size: 17px;
            padding: 0.08rem;
        }

        .like {
            color: #fff;
            font-size: 15px;
            position: absolute;
            right: 0.4rem;
            bottom: 0;
        }

    </style>
</head>
<body>
<div class="header">
    <p>我是header</p>
</div>
<div class="content">
    <ul>
        <li class="item">
            <div class="item-top">
                <img class="top-img"
                     src="http://wx.qlogo.cn/mmopen/v4P2R8A0QbPpy7UcLbicHEKQuWBL7cUD2PupycTlhauvkrGvwpia11cZ7icGses9uNhBCZh49mvmJia61N9Ga6ceYA/0">
            </div>
            <div class="item-middle">
                <p class="middle-text">这是一段测试文字</p>
                <p class="middle-text">段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字</p>
            </div>
            <div class="item-buttom">
                <span class="like">点赞</span>
            </div>
        </li>
        <li class="item">
            <div class="item-top">
                <img class="top-img"
                     src="http://wx.qlogo.cn/mmopen/v4P2R8A0QbPpy7UcLbicHEKQuWBL7cUD2PupycTlhauvkrGvwpia11cZ7icGses9uNhBCZh49mvmJia61N9Ga6ceYA/0">
            </div>
            <div class="item-middle">
                <p class="middle-text">这是一段测试文字</p>
                <p class="middle-text">段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字</p>
            </div>
            <div class="item-buttom">
                <span class="like">点赞</span>
            </div>
        </li>
        <li class="item">
            <div class="item-top">
                <img class="top-img"
                     src="http://wx.qlogo.cn/mmopen/v4P2R8A0QbPpy7UcLbicHEKQuWBL7cUD2PupycTlhauvkrGvwpia11cZ7icGses9uNhBCZh49mvmJia61N9Ga6ceYA/0">
            </div>
            <div class="item-middle">
                <p class="middle-text">这是一段测试文字</p>
                <p class="middle-text">段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字</p>
            </div>
            <div class="item-buttom">
                <span class="like">点赞</span>
            </div>
        </li>
        <li class="item">
            <div class="item-top">
                <img class="top-img"
                     src="http://wx.qlogo.cn/mmopen/v4P2R8A0QbPpy7UcLbicHEKQuWBL7cUD2PupycTlhauvkrGvwpia11cZ7icGses9uNhBCZh49mvmJia61N9Ga6ceYA/0">
            </div>
            <div class="item-middle">
                <p class="middle-text">这是一段测试文字</p>
                <p class="middle-text">段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字</p>
            </div>
            <div class="item-buttom">
                <span class="like">点赞</span>
            </div>
        </li>
    </ul>
</div>
</body>
</html>
